<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list</title>
    <script src="js/jquery2.1.4.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap3.3.7.js"></script>
    <script src="vue/Vue.js"></script>
    <script src="vue/axios.js"></script>
</head>
<body>
<div id="app">
<table class="table table-bordered table-hover">
    <thead>
    <tr>
        <th>文章标题</th>
        <th>知识点</th>
        <th>创建时间</th>
        <th>最后修改时间</th>
        <th>可见情况</th>
        <th>审核情况</th>
        <th>删除</th>
        <th>修改</th>

    </tr>
    </thead>

    <tbody>

    <tr v-for="ar in articles" >
        <td>{{ar.tittle}}</td>
        <td>{{ar.kp}}</td>
        <td>{{ar.gmtCreate}}</td>
        <td>{{ar.gmtModified}}</td>
        <td v-if="ar.rage=='0'" >本班可见</td>
        <td v-if="ar.rage=='1'" >本年级</td>
        <td v-if="ar.rage=='2'" >本县市区</td>
        <td v-if="ar.exam=='0'" >未审核</td>
        <td v-if="ar.exam=='1'" >已审核</td>

        <td>
            <button class="btn btn-outline-success" @click="remove(ar.id)">删除</button>
        </td>
        <td>
            <button class="btn btn-outline-success" @click="update(ar.id)">修改</button>
        </td>
    </tr>
    </tbody>
</table>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            articles:[],
        },
        mounted(){
            axios.get("/articlerelease/findAll")
                .then(res => {
                    console.info(res.data);
                    this.articles = res.data;
                });
        },
        methods:{
            remove(id){
                //先请求，后台先归还，后台成功了，前台才应该删除数据
                var params = new URLSearchParams();
                params.append("id",id);
                axios.post("/articlerelease/deleteArticle",params)
                    .then(res => {
                        if (res.data==1) {
                            //alert("后台成功");
                            for(var i=0;i<this.articles.length;i++){
                                ar = this.articles[i];
                                if (ar.id==id) {
                                    //删除记录   只需要删除数据，页面上的记录也会被删除掉
                                    this.articles.splice(i,1);//从i的位置删除1个元素 包括i
                                    break;
                                }
                            }
                        }else{
                            alert("后台没成功");
                        }
                    })

            },
            update(id){
                window.location.href='/cyh/articleById.html?id='+id;
            }

        }
    });

</script>
</body>
</html>